<template>
  <view class="">
    <view class="sticky t-0 flex py-5 bg-white hair--b">
      <view class="flex-1 flex-ca hair--r">
        <view class="tab-item" :class="active === 1 ? 'tab-active' : ''" @click="change(1)">文档推广</view>
      </view>
      <view class="flex-1 flex-ca">
        <view class="tab-item" :class="active === 2 ? 'tab-active' : ''" @click="change(2)">商品推广</view>
      </view>
    </view>
    <view class="bg-white mt-10">
      <view v-for="item in list" :key="item.object_id">
        <view class="flex-ba h-36 text-12 px-14 hair--b">
          <view class="">用户昵称：{{ item.nickname }}</view>
          <view class="text-info">{{ $f.formatDate(item.create_time, 'YYYY-mm-dd') }}</view>
        </view>
        <view v-if="active === 1" class="flex py-10 px-14">
          <view class="file-logo flex-ca text-12">{{ item.object_logo }}</view>
          <view class="flex-1 leading-20 ellipsis-2">
            {{ item.object_name }}
          </view>
        </view>
        <view v-else class="flex-a py-10 px-14">
          <image class="goods-logo" :src="item.object_logo" />
          <view class="flex-1 flex-vb h-70">
            <view class="h-40 leading-20 ellipsis-2">{{ item.object_name }}</view>
            <view class="flex-ba text-12">
              <view class="text-error">￥{{ item.price }}</view>
              <view class="text-info">{{ item.end_date }}到期</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more :status="$f.getLoading(loading)" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      active: 1,
      list: [],
      page: 1,
      loading: 0,
      limit: 20
    }
  },
  onReachBottom() {
	  this.getList()
  },
  onLoad() {
    this.getList()
  },
  methods: {
    change(e) {
      this.active = e
      this.page = 1
      this.loading = 0
      this.list = []
      this.getList()
    },
    getList() {
      if (this.loading) return
      this.loading = 1
      this.$f.post('api/userShareLog', {
        type: this.active,
        page: this.page,
        limit: this.limit
      }).then(res => {
        this.loading = this.limit > res.data.length ? 2 : 0
        if (res.data.length) {
          this.list = [...this.list, ...res.data]
          this.page += 1
        }
      })
    }
  }
}
</script>
<style lang="scss">
	.tab-item {
		height: 60rpx;
		line-height: 60rpx;
		border-top: 4rpx solid transparent;
		border-bottom: 4rpx solid transparent;
		&.tab-active {
			color: $uni-primary;
			border-bottom-color: $uni-primary;
		}
	}
	.goods-logo {
		width: 180rpx;
		height: 140rpx;
		margin-right: 16rpx;
		border-radius: 12rpx;
	}
	.file-logo {
		width: 80rpx;
		height: 80rpx;
		margin-right: 16rpx;
		background-color: #E7ECF2;
	}
</style>

